<template>
	<div class="card card-chart" style="padding-bottom: 0" v-resize="resizeChange">
		<div class="box-title title-medium">
			{{ state.title }}
		</div>
		<div class="mixin-status-proportion-box">
			<div class="proportion-box" :style="statusNull ? 'background-color: #D7D7D7;' : 'background-color: #FFFFFF;'">
				<div
					class="item"
					v-for="(item, index) in state.data"
					:key="index"
					v-show="item.value > 0"
					:style="`${index > 0 ? `margin-left: ${proportionGap}px;` : ``} background-color: ${item.color}; width: ${item.width}`"
				></div>
			</div>
			<div class="proportion-content">
				<div class="item" v-for="(item, index) in state.data" :key="index">
					<div>
						<div :style="`background-color: ${item.color}`"></div>
						<div>{{ item.label }}</div>
					</div>
					<div>{{ item.value }}</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { debounce } from '/@/utils/debounce-throttle';
import { SchedulePercentageProps } from '/@/views/bizs/Dashboard/components/schedulePercentage';

const props = withDefaults(
	defineProps<{
		state: SchedulePercentageProps;
	}>(),
	{
		// 参数
		state: () => ({}),
	}
);

const statusNull = computed(() => {
	return props.state.data!.every((item) => item.value == 0);
});
// 颜色组
const colors = reactive(['#129cff', '#00daf2', '#12a3d0', '#b9daf2', '#00b9f2', '#baf2e9', '#0079da']);

// 自定义占比图表间隙
const proportionGap = ref<number>(3);

// 尺寸-改变
const resizeChange = debounce(function (val) {
	console.log('resizeChange', val);
	// 获取元素宽度根据占比计算各项元素宽度
	let width = val.width ? val.width.substring(0, val.width.indexOf('px')) : 0;
	const length = props.state.data.length;
	// console.log('width before', width, length)
	// 减去间隙宽度
	width = width - proportionGap.value * (length > 0 ? length - 1 : 0);
	// console.log('width after', width)
	props.state.data.forEach((item) => {
		item.width = ((width * item.percentage) / 100).toFixed(2) + 'px';
		// console.log(item, `el width: ${width}, item width: ${item.width}`)
	});
}, 300);
</script>

<style scoped lang="scss">
$boxHeight: 272px;
$boxGap: 20px;

.card {
	////避免盒子断裂成两部分
	//break-inside: avoid;

	padding: 24px;
	//margin-right: $boxGap;
	//margin-bottom: $boxGap;
}

.title-medium {
	line-height: 22px !important;
	font-weight: 500 !important;
}

.card-chart {
	min-height: $boxHeight;
	height: 100%;

	.box_total {
		height: 32px;
		margin: 8px 0 4px 0;
		font-size: 26px;
		font-weight: 600;
		text-align: left;
		color: #39404d;
		line-height: 32px;
	}

	//进图条内容
	.progress_content {
		width: 100%;

		.item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 81px;

			& > span {
				min-width: 80px;
				text-align: center;
			}

			& > .el-progress {
				width: 100%;
				height: 16px;
			}

			.progress_content_right {
				min-width: 108px;
				margin-left: 20px;
				div {
					width: 100%;
					font-size: 12px;
					font-weight: 400;
					text-align: left;
					color: #646b80;
					line-height: 17px;
				}
				div:nth-child(2) {
					font-size: 14px;
					line-height: 16px;
					font-weight: 600;
					margin-top: 2px;
				}
			}
		}
	}

	.pie_position {
		width: 100%;
		min-height: 72px;
		background: #f7f9fc;
		padding: 8px 12px;
		padding-bottom: 0px;
		display: flex;
		align-items: center;
		justify-content: center;

		.pie_position_flex {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			flex-wrap: wrap;
		}

		.item {
			padding: 0 8px 8px;
			display: flex;
			justify-items: center;
			align-items: flex-start;

			i {
				display: block;
				min-width: 8px !important;
				max-width: 8px !important;
				height: 8px;
				border-radius: 2px;
				margin-right: 4px;
				margin-top: 3px;
			}

			span {
				// height: 14px;
				font-size: 12px;
				font-weight: 400;
				text-align: left;
				color: #646b80;
				line-height: 14px;
				// margin-right: 16px;
			}
		}
	}
}

// 混合状态占比盒子
.mixin-status-proportion-box {
	width: 100%;
	// height: 414px;

	// 占比-盒子
	.proportion-box {
		width: 100%;
		display: flex;
		justify-items: flex-start;
		align-items: center;
		margin-top: 24px;

		.item {
			height: 12px;
			transition: width 0.5s;
		}
	}
	// 占比-内容
	.proportion-content {
		width: 100%;

		.item {
			height: 52px;
			display: flex;
			justify-content: space-between;
			align-items: center;

			& > div:first-child {
				display: flex;
				justify-content: flex-start;
				align-items: center;

				& > div:first-child {
					width: 6px;
					height: 6px;
					margin-right: 6px;
					border-radius: 50%;
				}

				& > div:last-child {
					font-size: 14px;
					font-weight: 500;
					color: #39404d;
				}
			}

			& > div:last-child {
				font-size: 14px;
				font-weight: 500;
				color: #39404d;
			}
		}
	}

	//进图条-内容
	.progress-content {
		width: 100%;
		margin-top: 20px;

		.item {
			height: 60px;
			display: flex;
			justify-content: space-between;
			align-items: center;

			& > .el-progress {
				width: 100%;

				:deep(.el-progress-bar) {
					width: 100%;
					min-width: 201px;
				}
			}

			.box-text {
				margin-left: 20px;
				width: auto;
				min-width: 108px;

				& > div:first-of-type {
					height: 14px;
					font-size: 12px;
					font-weight: 400;
					text-align: left;
					color: #646b80;
					line-height: 14px;
				}

				& > div:last-of-type {
					margin-top: 2px;

					height: 16px;
					font-size: 14px;
					font-weight: 600;
					text-align: left;
					color: #646b80;
					line-height: 16px;
				}
			}
		}
	}
}
</style>
